<template>
    <div
            ref="node_show"
            :style="nodeContainerStyle"
            :class="[{'flow-node-container': true}, nodeTypeActive]"
    >
        <!-- 最左侧的那条竖线 -->
        <div :class="[nodeTypeActive, 'flow-node-left']"></div>
        <!-- 标识节点类型的图标 -->
        <div class="flow-node-left-ico flow-node-drag">
            <i :class="nodeIcoClass"></i>
        </div>
        <!-- 显示的节点名称 -->
        <div class="flow-node-text" :show-overflow-tooltip="true">
            {{node_show.name}}
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            node_show: Object,
        },
        data() {
            return {

            }
        },
        computed: {
            nodeTypeActive() {
              return {
                'start' : this.node_show.type === 'start',
                'end' : this.node_show.type === 'end'
              }
            },
            // 节点容器样式
            nodeContainerStyle() {
                return {
                    top: this.node_show.top,
                    left: this.node_show.left
                }
            },
            nodeIcoClass() {
                var nodeIcoClass = {}
                nodeIcoClass[this.node_show.ico] = true
                return nodeIcoClass
            }
        },
        methods: {

        }
    }
</script>

<style>
    .flow-node-container {
        position: absolute;
        display: flex;
        width: 170px;
        height: 32px;
        border: 1px solid #E0E3E7;
        border-radius: 5px;
        background-color: #fff;
    }

    .flow-node-container:hover {
        /* 设置移动样式*/
        cursor: move;
        background-color: #F0F7FF;
        /*box-shadow: 0px 0px 12px 0px #1879FF;*/
        border: 1px dashed #1879FF;
    }
	.flow-node-container.start:hover {
	    /*box-shadow: 0px 0px 12px 0px #00c300;*/
		background-color: #f0ffed;
	    border: 1px dashed #00c300;
	}
	.flow-node-container.end:hover {
	    /*box-shadow: 0px 0px 12px 0px #717171;*/
		background-color: #f7f7f7;
	    border: 1px dashed #717171;
	}

    /*激活状态*/
    .flow-node-active {
        background-color: #F0F7FF;
        /* box-shadow: 0px 0px 5px 0px #1879FF; */
        background-color: #F0F7FF;
        border: 1px solid #1879FF;
    }
	.flow-node-active.start {
	    /* box-shadow: 0px 0px 5px 0px #00c300; */
	    border: 1px solid #00c300;
	}
	.flow-node-active.end {
	    /* box-shadow: 0px 0px 5px 0px #717171; */
	    border: 1px solid #717171;
	}

    .flow-node-left {
        width: 4px;
        background-color: #1879FF;
        border-radius: 4px 0 0 4px;
    }
	.flow-node-left.start {
	    background-color: #00c300;
	}
	.flow-node-left.end {
	    background-color: #717171;
	}

    .flow-node-left-ico {
        line-height: 32px;
        margin-left: 8px;
    }

    .flow-node-left-ico:hover {
        /* 设置拖拽的样式 */
        cursor: crosshair;
    }

    .flow-node-text {
        color: #565758;
        font-size: 12px;
        line-height: 32px;
        margin-left: 8px;
        width: 100px;
        /* 设置超出宽度文本显示方式*/
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    .flow-node-right-ico {
        line-height: 32px;
        position: absolute;
        right: 10px;
        color: #da0000;
        cursor: default;
    }

</style>
